<template>
  <div>
    <div class="el-card-body">
      <i class="el-icon-tickets"
         style="margin-top: 5px;">
      </i>
      <span style="margin-top: 5px;">
        首页轮播图
      </span>
        <el-button
          type="primary" size="mini" icon="el-icon-delete" style="margin-left: 85%" @click="addMenu(false)">添加
        </el-button>
    </div>
    <!--表格视图-->
    <div>
      <div>
        <el-table
          :data="tableData"
          stripe
          border>
          <el-table-column
            type="selection"
            width="55">
          </el-table-column>
          <el-table-column
            prop="id"
            label="ID"
            width="60">
          </el-table-column>
          <el-table-column
            prop="name"
            label="广告名称"
            width="120">
          </el-table-column>
          <el-table-column
            prop="type"
            label="广告位置"
            width="120">
          </el-table-column>
          <el-table-column
            property="picA"
            label="轮播图1"
            width="140">
            <template #default="scope">
              <el-image class="table-td-thumb"
                        :src="scope.row.picA"
                        :preview-src-list="[scope.row.picA]">
              </el-image>
            </template>
          </el-table-column>
          <el-table-column
            prop="startTime"
            label="开始时间"
            width="160">
          </el-table-column>
          <el-table-column
            prop="endTime"
            label="结束时间"
            width="160">
          </el-table-column>
          <el-table-column
            prop="url"
            label="链接地址"
            width="100">
          </el-table-column>
          <el-table-column
            prop="status"
            label="状态"
            width="120">
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.status"
                active-color="#13ce66"
                inactive-color="#ff4949"
                active-text="上线"
                @change="enabledChange(scope.$index, scope.row)">
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column
            prop="note"
            label="备注"
            width="120">
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                type="warning" size="mini" icon="el-icon-edit"
                @click="showEditView(scope.$index, scope.row,true)" plain>
              </el-button>
              <el-button
                type="danger" size="mini" icon="el-icon-delete"
                @click="handleDelete(scope.$index, scope.row)" plain>
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <!--分页条-->
        <div style="width: 50%; margin: 0 auto">
          <el-pagination
            class="pagination"
            style="padding-top: 15px"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="current"
            :page-sizes="[5, 10, 20, 30]"
            :page-size="size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
        </div>
      </div>
    </div>
    <!--弹框-->
    <el-dialog :title="isEdit ? '编辑banner' : '添加banner'" :visible.sync="dialogVisible" :center="true" width="600px">
      <el-row :gutter="15">
        <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
          <el-col :span="12">
            <el-form-item label="广告名称" prop="name">
              <el-input v-model="formData.name" placeholder="请输入广告名称" show-word-limit clearable
                        :style="{width: '100%'}"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="广告位置" prop="type">
              <el-input v-model="formData.type" placeholder="请输入广告位置" clearable :style="{width: '100%'}">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="开始时间" prop="startTime">
              <el-date-picker type="datetime" v-model="formData.startTime" format="yyyy-MM-dd HH:mm:ss"
                              value-format="yyyy-MM-dd HH:mm:ss" :style="{width: '100%'}" placeholder="请选择开始时间" clearable>
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="结束时间" prop="endTime">
              <el-date-picker type="datetime" v-model="formData.endTime" format="yyyy-MM-dd HH:mm:ss"
                              value-format="yyyy-MM-dd HH:mm:ss" :style="{width: '100%'}" placeholder="请选择结束时间" clearable>
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="上传图片" required>
              <el-upload
                class="upload-demo"
                action="string"
                :http-request="uploadImg"
                :on-remove="handleRemove">
                <el-button size="small" type="primary">上传banner图</el-button>
                <div slot="tip" class="el-upload__tip">
                  <img v-if="hidden" :src=formData.picA  style="width: 180px;height: 80px">
                  只能上传jpg/png文件，且不超过500kb
                </div>
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="链接地址" prop="url">
              <el-input v-model="formData.url" placeholder="请输入链接地址" clearable :style="{width: '100%'}">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="状态" prop="status" required>
              <el-switch v-model="formData.status" active-text="上线" inactive-text="下线" active-color="#1DD60C">
              </el-switch>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="备注" prop="note">
              <el-input v-model="formData.note" type="textarea" placeholder="请输入备注"
                        :autosize="{minRows: 2, maxRows: 2}" :style="{width: '100%'}"></el-input>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <div slot="footer">
        <el-button @click="dialogVisible=false">取消</el-button>
        <el-button type="primary" @click="handelConfirm">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: 'SysBas',
    data () {
      return {
        // 每页显示的条数
        size: 5,
        // 总条数
        total: 100,
        // 当前页码
        current:1,
        tableData: [],
        dialogVisible:false,
        isEdit:'',
        updateFormData:{},
        formData: {
          picA:undefined,
          name: undefined,
          type: undefined,
          startTime: '',
          endTime: '',
          url: undefined,
          status: undefined,
          note: undefined,
        },
        hidden:true,
        rules: {
          name: [{
            required: true,
            message: '请输入广告名称',
            trigger: 'blur'
          }],
          type: [{
            required: true,
            message: '请输入广告位置',
            trigger: 'blur'
          }],
          startTime: [{
            required: true,
            message: '请选择开始时间',
            trigger: 'change'
          }],
          endTime: [{
            required: true,
            message: '请选择结束时间',
            trigger: 'change'
          }],
          url: [{
            required: true,
            message: '请输入链接地址',
            trigger: 'blur'
          }],
          note: [{
            required: true,
            message: '请输入备注',
            trigger: 'blur'
          }],
        },
      }
    },
    mounted () {
      this.initTable();
    },
    methods: {
      // 当每页条数改变时
      handleSizeChange(val) {
        // 将val重新复制给size
        this.size=val;
        // 重新去后台查询数据
        this.initTable();
      },
      // 当每页码数改变时
      handleCurrentChange(val) {
        // 将val重新复制给current
        this.current=val;
        this.initTable();
      },
      enabledChange(index,data){
        console.log(data.status)
        this.putRequest('/system/basic/pic',data).then(resp=>{
          if (resp){
            this.dialogVisible=false;
            this.$notify.success({ title: '成功', message: resp.message });
          }
        })
      },
      //删除事件
      handleDelete(index,data){
        this.$confirm('此操作将删除菜单, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.deleteRequest('/system/basic/pic/'+data.id).then(resp=>{
            this.initTable();
            this.$notify.success({ title: '成功', message: resp.message });
          })
        }).catch(() => {
          this.$notify.info({ title: '消息', message: '已取消删除' });
        });
      },
      //显示修改弹出框赋值
      showEditView(index,data,edit){
        this.isEdit=edit
        Object.assign(this.formData,data);
        this.hidden=true;
        this.dialogVisible=true;
        this.formData.picA=data.picA;
      },
      // 显示添加弹出框赋值
      addMenu(edit){
        this.hidden=false
        this.isEdit=edit
        this.dialogVisible=true
        this.resetView()
      },
      resetView () {
        this.formData.picA=''
        this.formData.type=''
        this.formData.name=''
        this.formData.endTime=''
        this.formData.startTime=''
        this.formData.url=''
        this.formData.status=false
        this.formData.note=''
      },
      // 添加、修改菜单
      handelConfirm() {
        //修改事件
        if(this.isEdit){
          this.$refs['elForm'].validate(valid => {
            if (!valid) return
            this.putRequest('/system/basic/pic',this.formData).then(resp=>{
              if (resp){
                this.dialogVisible=false;
                this.$notify.success({ title: '成功', message: resp.message });
                this.initTable();
              }
            })
          })
        }else{
          // 添加事件
          this.$refs['elForm'].validate(valid => {
            if (!valid) return
            this.postRequest('/system/basic/pic',this.formData).then(resp => {
              if (resp) {
                this.$notify.success({ title: '成功', message: resp.message });
                this.dialogVisible=false;
                this.initTable()
              }
            })
          })
        }
      },
      //查询轮播图列表
      initTable () {
        this.getRequest('/system/basic/pic/?current='+this.current+'&&size='+this.size).then(resp => {
          if (resp) {
            this.tableData = resp.records;
            this.total = resp.total;
          }
        })
      },
      //上传图片
      uploadImg(item) {
        let formData = new FormData()
        formData.append('file', item.file)
        this.hidden=false;
        this.postRequest('/good/data/uploadImgFile',formData).then(resp => {
          if (resp) {
            this.formData.picA=resp.obj;
          }
        })
      },
      //删除图片
      handleRemove() {
        let formData = new FormData()
        formData.append('file', this.formData.picA)
        this.postRequest('/good/data/deleteImgFile',formData).then(resp => {
          if (resp) {
            console.log(resp);
          }
        })
      },
    }
  }

</script>

<style scoped>
  .el-card-body {
    width: 97%;
    padding: 10px;
    border-style:solid;
    border-width: 1px;
    border-color: #ddded9;
    margin: 20px 0px;
  }

</style>
